<section ion-list class="addon-qtype-calculated-container" *ngIf="question.text || question.text === ''">
    <ion-item text-wrap>
        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p>
    </ion-item>

    <!-- Display unit options before the answer input. -->
    <ng-container *ngIf="question.options && question.options.length && question.optionsFirst">
        <ng-container *ngTemplateOutlet="radioUnits"></ng-container>
    </ng-container>

    <ion-item text-wrap ion-grid ngClass="core-{{question.input.correctIconColor}}-item">
        <ion-label stacked>{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
        <ion-grid item-content no-padding>
            <ion-row>
                <!-- Display unit select before the answer input. -->
                <ng-container *ngIf="question.select && question.selectFirst">
                    <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
                </ng-container>

                <!-- Input to enter the answer. -->
                <ion-col>
                    <ion-input padding-left type="text" [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" autocorrect="off">
                    </ion-input>
                </ion-col>

                <!-- Display unit select after the answer input. -->
                <ng-container *ngIf="question.select && !question.selectFirst">
                    <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
                </ng-container>
            </ion-row>
            <core-icon *ngIf="question.input.correctIcon" class="core-correct-icon" item-content item-end [name]="question.input.correctIcon" [color]="[question.input.correctIconColor]"></core-icon>
        </ion-grid>
    </ion-item>

    <!-- Display unit options after the answer input. -->
    <ng-container *ngIf="question.options && question.options.length && !question.optionsFirst">
        <ng-container *ngTemplateOutlet="radioUnits"></ng-container>
    </ng-container>
</section>

<!-- Template for units entered using a select. -->
<ng-template #selectUnits>
    <ion-col>
        <label *ngIf="question.select.accessibilityLabel" class="accesshide" for="{{question.select.id}}">{{ question.select.accessibilityLabel }}</label>
        <ion-select id="{{question.select.id}}" [name]="question.select.name" [(ngModel)]="question.select.selected" interface="action-sheet" [disabled]="question.select.disabled">
            <ion-option *ngFor="let option of question.select.options" [value]="option.value">{{option.label}}</ion-option>
        </ion-select>

        <!-- ion-select doesn't use a select. Create a hidden input to hold the selected value. -->
        <input type="hidden" [ngModel]="question.select.selected" [attr.name]="question.select.name">
    </ion-col>
</ng-template>

<!-- Template for units entered using radio buttons. -->
<ng-template #radioUnits>
    <div radio-group [(ngModel)]="question.unit" [name]="question.optionsName">
        <ion-item text-wrap *ngFor="let option of question.options">
            <ion-label>{{ option.text }}</ion-label>
            <ion-radio [value]="option.value" [disabled]="option.disabled || question.input.readOnly" [color]="question.input.correctIconColor"></ion-radio>
        </ion-item>

        <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->
        <input type="hidden" [ngModel]="question.unit" [attr.name]="question.optionsName">
    </div>
</ng-template>
